<template>
  <div>
    <div class="s-item pb-0">
      <div class="s-label">
        <span class="text-danger mr-1" v-if="mediaTag.required">*</span>
        {{ mediaTag.tag }}
      </div>
      <div class="s-content">
        <attach-upload
          :tags="[
            { tag: mediaTag.tag, parentTag: mediaTag.parentTag, required: mediaTag.required },
          ]"
          :batch-no="relatedId"
          :show-label="false"
          :view-mode="viewMode"
          @after-data="handleAfterData"
        ></attach-upload>
      </div>
    </div>

    <div class="s-item">
      <div class="s-label">
        <span class="text-danger mr-1">*</span>
        {{ imageTag.tag }}
      </div>
      <div class="s-content">
        <el-button
          type="primary"
          size="small"
          :icon="viewMode ? 'el-icon-search' : 'el-icon-upload2'"
          class="btn-long mr-3"
          @click="attachVisible = true"
        >
          {{ viewMode ? '查看' : '上传' }}
        </el-button>
        <finish-status :status="hasImageFinish"></finish-status>
        <attach-image-upload
          :title="imageTag.tag"
          :visible.sync="attachVisible"
          :related-id="relatedId"
          :view-mode="viewMode"
          :attach-tag="imageTag.tag"
          :parent-tag="imageTag.parentTag"
          @after-data="handleImageAfterData"
        ></attach-image-upload>
      </div>
    </div>

    <div class="s-item">
      <div class="s-label">
        <span class="text-danger mr-1">*</span>
        {{ reportTag.tag }}
      </div>
      <div class="s-content">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          class="btn-long mr-3"
          @click="dueReportVisible = true"
        >
          {{ viewMode ? '查看' : '上传' }}
        </el-button>
        <finish-status :status="hasDueReportFinish"></finish-status>
      </div>
    </div>

    <due-report
      :visible.sync="dueReportVisible"
      :query-id="relatedId"
      :view-mode="viewMode"
      @success="handleDurReportSuccess"
    ></due-report>
  </div>
</template>

<script>
import { getAttachTags, hasSceneImageFinish } from '@/credit/views/city/bus/normal/invest/attach'
import AttachUpload from '@/bank/components/attach/Upload'

import AttachImageUpload from '@/credit/views/city/bus/normal/invest/AttachUpload'
import DueReport from '@/credit/views/county/unionProvince/components/dueReport/MainDialog'

export default {
  components: {
    AttachUpload,
    AttachImageUpload,
    DueReport,
    'finish-status': {
      functional: true,
      props: {
        status: Boolean,
      },
      render: (h, ctx) =>
        h('span', { class: ctx.props.status ? 'text-success' : 'text-danger' }, [
          h('i', { class: `fa ${ctx.props.status ? 'fa-check' : 'fa-times'}` }),
          h('span', ctx.props.status ? '已完成' : '未完成'),
        ]),
    },
  },
  props: {
    projectData: {
      type: Object,
      default: () => ({}),
    },
    viewMode: Boolean,
  },
  data() {
    return {
      attachVisible: false,
      dueReportVisible: false,
      attachList: [],
    }
  },
  computed: {
    relatedId() {
      return this.projectData.customer_related_id
    },
    hasDueReportFinish() {
      return +this.projectData.census_status > 0
    },
    enumSceneTags() {
      return getAttachTags(this.projectData)
    },
    mediaTag() {
      return this.enumSceneTags[0]
    },
    imageTag() {
      return this.enumSceneTags[1]
    },
    reportTag() {
      return this.enumSceneTags[2]
    },
    hasImageFinish() {
      return hasSceneImageFinish(this.attachList, this.projectData).finish
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleDurReportSuccess(res) {
      this.$emit('success', res)
    },
    handleAfterData(res) {
      this.attachList = res.list || []
      this.$emit('after-data', res)
    },
    handleImageAfterData(res) {
      this.attachList = res.list || []
      this.$emit('after-data', res)
    },
  },
}
</script>

<style lang="scss" scoped>
.s-item {
  display: flex;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dotted #e9ecef;
}
.s-label {
  width: 180px;
  padding-top: 0.25rem;
  padding-left: 0.5rem;
}
.s-content {
  flex: 1;
}
</style>
